<template>
  <div class="upload-image">
    <div class="section-header">
      <span>{{ title }}</span>
      <span v-if="!noReset" class="reset" @click="resetUpload">重置</span>
    </div>

    <div class="section-body">
      <div
        class="upload-section"
        @click="$refs.editBackground.onClickUploadBtn()"
      >
        <div class="img-add">
          <i class="iconfont icon-jiahao"></i>
        </div>
        <div class="img-desc">
          <h4>添加图片</h4>
          <p>最佳尺寸:{{ size }}</p>
        </div>
      </div>
      <div class="preview-section" v-show="showPreviewSection">
        <div class="preview-item" v-if="type == 'single'">
          <div class="has-img" v-show="uploadImg">
            <img :src="uploadImg" alt="" />
            <div class="hover-cover">
              <i
                class="iconfont icon-xianshi"
                @click.stop="previewImg(uploadImg)"
              ></i>
              <i
                class="iconfont icon-weibiaoti-1"
                @click.stop="$refs.editBackground.onClickUploadBtn()"
              ></i>
              <div class="close-icon" @click.stop="deleteImg">x</div>
            </div>
          </div>
        </div>
        <div
          v-else
          class="preview-item"
          :class="activeIndex == index ? 'active' : ''"
          v-for="(item, index) in imgList"
          @click.stop="handleImgItem(item, index)"
          :key="index"
        >
          <div class="has-img" v-show="item.picUrl || item.pic_url">
            <img :src="item.picUrl || item.pic_url" alt="" />
            <div class="hover-cover">
              <i
                class="iconfont icon-xianshi"
                @click.stop="previewImg(item.picUrl || item.pic_url)"
              ></i>
              <i
                class="iconfont icon-weibiaoti-1"
                @click.stop="changeImg(item, index)"
              ></i>
              <div class="close-icon" @click.stop="deleteImg(item, index)">
                x
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图片预览组件 -->
    <previewImg
      :previewSrc="previewSrc"
      :hidden.sync="showPreviewImg"
      @close="showPreviewImg = false"
    ></previewImg>

    <storage-select
      :hiddenInput="true"
      ref="editBackground"
      @onOk="afterUpload"
    ></storage-select>
  </div>
</template>

<script>
import SelectLink from "@/components/DiyNew/SelectLink/index.vue";
import previewImg from "@/components/DiyNew/previewImg/index.vue";

export default {
  name: "",
  components: {
    SelectLink,
    previewImg,
  },
  props: {
    title: {
      type: String,
      default: "上传图片",
    },
    uploadImg: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "single", // single: 单张图  list: 多图
    },
    imgList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    size: {
      type: String,
      default: "750*316px",
    },
    propActiveIndex: {
      type: Number,
      default: -1,
    },
    noReset: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showPreviewImg: false,
      previewSrc: "",
      currentItem: null,
      currentIndex: -1,
      activeIndex: -1,
    };
  },
  watch: {
    propActiveIndex(val) {
      if (val >= 0) {
        this.activeIndex = val;
      }
    },
  },
  computed: {
    // 判断是否展示预览区域
    showPreviewSection() {
      if (this.type == "single" && !this.uploadImg) {
        return false;
      }
      if (this.type == "list" && this.imgList.length <= 0) {
        return false;
      }
      return true;
    },
  },
  methods: {
    // 点击预览图片
    previewImg(src) {
      this.showPreviewImg = true;
      this.previewSrc = src;
    },
    // 切换图片
    changeImg(item, index) {
      this.currentItem = item;
      this.currentIndex = index;
      this.$refs.editBackground.onClickUploadBtn();
    },
    // 删除图片
    deleteImg(item, index) {
      if (this.type == "list") {
        this.$emit("deleteImg", { item, index });
        return;
      }
      this.$emit("deleteImg", {});
    },
    // 上传回调
    afterUpload(e) {
      console.log("afterUpload", e);
      if (this.currentItem && this.currentIndex > -1) {
        this.$emit("changeImg", { val: e, index: this.currentIndex });
        setTimeout(() => {
          this.currentItem = null;
          this.currentIndex = -1;
        }, 0);
        return;
      }
      this.$emit("uploadSuccess", { val: e });
    },
    // 点击重置
    resetUpload() {
      if (this.type == "single") {
        this.$emit("deleteImg");
        return;
      }
      this.$emit("resetUpload");
    },
    // 点击上传的图片
    handleImgItem(item, index) {
      this.activeIndex = index;
      this.$emit("handleImgItem", { item, index });
    },
  },
};
</script>

<style lang="scss" scoped>
.upload-image {
  width: 228px;
  .section-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0 14px 0;
    font-size: 12px;
    line-height: 17px;
    color: #000000;
    span {
      user-select: none;
    }
    .reset {
      color: #9e9e9e;
      cursor: pointer;
    }
  }
  .section-body {
    width: 100%;
    background: #f6f7f9;
    border-radius: 6px;
    overflow: hidden;
    .upload-section {
      width: 100%;
      height: 72px;
      background: #f6f7f9;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 14px;
      cursor: pointer;
      .img-add {
        width: 44px;
        height: 44px;
        background: #ffffff;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        .iconfont {
          font-size: 25px;
        }
      }
      .img-desc {
        margin-left: 14px;
        text-align: left;
        h4 {
          font-size: 14px;
          font-weight: 600;
          line-height: 20px;
          color: #000000;
          margin: 0;
        }
        p {
          margin: 0;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 17px;
          color: #878889;
        }
      }
    }
    .upload-section:hover {
      background-color: #e2e3e5;
    }
    .preview-section {
      width: 224px;
      min-height: 68px;
      background: #ffffff;
      border-radius: 6px;
      margin: 2px;
      display: flex;
      align-items: center;
      padding-left: 12px;
      flex-wrap: wrap;
      .preview-item {
        width: 44px;
        height: 44px;
        background: #ffffff;
        border: 1px solid rgba(112, 112, 112, 0.050980392156862744);
        border-radius: 4px;
        margin: 4px;
        position: relative;
        flex-shrink: 0;
        .has-img {
          width: 100%;
          height: 100%;
        }
        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
        }
        .hover-cover {
          width: 44px;
          height: 44px;
          background: rgba(0, 0, 0, 0.5);
          border: 2px solid #1890fc;
          border-radius: 4px;
          position: absolute;
          left: -1px;
          top: -1px;
          z-index: 11;
          justify-content: center;
          align-items: center;
          display: none;
          transition: all 0.2s;
          .iconfont {
            color: #ffffff;
            font-size: 15px;
            cursor: pointer;
          }
          .icon-xianshi {
            margin-right: 5px;
          }
          .close-icon {
            width: 14px;
            height: 14px;
            background: #ff5414;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: -7px;
            top: -7px;
            z-index: 12;
            color: #ffffff;
            font-size: 12px;
            cursor: pointer;
          }
        }
      }
      .preview-item:hover > .has-img .hover-cover {
        display: flex;
      }
      .active {
        border: 2px solid #1890fc;
      }
    }
  }
}
</style>
